<template>
    <transition name="slide-right">
        <div class="body main_page" @mousewheel="scrollFunc(false)">
            <!--<img class="bgimg" src='@/assets/img/raw_1536733888.png'/>-->
            <div class="dapp-title">
                <span class="mui-icon mui-icon-back" @click="changeRoute('/index/dapp')"></span>
                <span>{{ title }}</span>
                <span></span>
            </div>
            <div style="margin-top: 15px;margin-left: calc(50% - 10px);width: 20px;height: 20px;position: fixed;top: 65px;"
                 data-loader="ball-pulse" v-show="showPullingDown"></div>
            <div class="content wrapper">
                <div class="efomo-main-box">
                    <!--头部内容-->
                    <div class="efomo-main-tit">
                        <div class="efomo-tit-time">
                            <em>ECOSYSTEM #{{ fomoInfo.bID }}</em>
                        </div>
                        <div class="efomo-tit-time">
                            <em>{{$t('m.efomo.biling.time')}}</em>
                            <time v-if="lCD.time > 0">{{ lCD.h }}:{{ lCD.m }}:{{ lCD.s }}</time>
                            <span v-else style="margin-left: 10px;">{{$t('m.efomo.lottery.time')[2]}}</span>
                        </div>
                        <div class="efomo-tit-asset">
                            <span>{{ fomoInfo.lastPot }}</span>ETSC
                        </div>
                        <div class="efomo-tit-last efomo-h5">
                            <em>Last 20 Winner Fund</em>
                            <span @click="aShowTip({id:'0',explainShow: true})">?</span>
                        </div>
                    </div>
                    <!--页面切换-->
                    <div class="efomo-main-tab">
                        <ul class="efomo-tab-list">
                            <li :class="active =='biling'? 'router-link-active':''"
                                @click="changeTab('/dapp/efomo/biling','biling')">{{$t('m.efomo.title')[1]}}
                            </li>
                            <li :class="active =='income'? 'router-link-active':''"
                                @click="changeTab('/dapp/efomo/income','income')">{{$t('m.efomo.title')[2]}}
                            </li>
                            <li :class="active =='lottery'? 'router-link-active':''"
                                @click="changeTab('/dapp/efomo/lottery','lottery')">{{$t('m.efomo.title')[3]}}
                            </li>
                            <li :class="active =='invite'? 'router-link-active':''"
                                @click="changeTab('/dapp/efomo/invite','invite')">{{$t('m.efomo.title')[4]}}
                            </li>
                        </ul>
                        <router-view></router-view>
                    </div>
                </div>
            </div>
            <Efomo_tip></Efomo_tip>
            <Efomo_list></Efomo_list>
            <Loading></Loading>
            <Prompt></Prompt>
        </div>
    </transition>
</template>

<script>
    import '@/assets/css/efomo.scss'
    import {getInit} from '@/assets/js/etherjs/fomo/fomo'
    import BScroll from 'better-scroll'
    import {synBalanceOnce} from '@/assets/js/timer/index';


    export default {
        name: "efomo_index",
        data() {
            return {
                active: 'biling',
                pathName: '',
                showPullingDown: false,
                title: "",
                lCD: {
                    h: "00", m: "00", s: "00", time: ""
                },
                wCD: {
                    h: "00", m: "00", s: "00", time: ""
                },
                hCD: {
                    h: "00", m: "00", s: "00", time: ""
                },
                dCD: {
                    h: "00", m: "00", s: "00", time: ""
                }
            }
        },
        mounted() {
            setTimeout(() => {
                this.setScroll();
            }, 200);
        },
        methods: {
            async init() {
                // 每次切换tab的时候都触发，节约请求资源，拒绝频繁发送rpc
                if (!this.fomoInfo.bID) {
                    this.showPullingDown = true;
                    await getInit(this.walletActive.address);
                    this.showPullingDown = false;
                }
                // 如果没有注册过，且没有设置注册嘛，直接跳到登录页
                if (this.fomoInfo.laff == 0) {
                    let laffKey = "fomo_laff_" + this.walletActive.address;
                    let res = localStorage.getItem(laffKey);
                    // 没有设置过推荐人，跳转到注册页
                    if (!res) {
                        this.changeRoute('/dapp/efomo/register');
                        return
                    }
                }
                this.getCountDown();
                for (let i in this.$children) {
                    if (this.$children[i].init) {
                        this.$children[i].init();
                    }
                }
                synBalanceOnce();
            },
            changeTab(url, path) { //路由跳转
                this.active = path;
                this.changeRoute(url);
            },
            setScroll() {  //页面滚动以及上拉加载、下拉刷新
                let scroll = new BScroll('.wrapper', {
                    scrollY: true,
                    click: true,
                    pullDownRefresh: {
                        threshold: 20, // 下拉距离超过30px触发pullingDown事件
                        stop: 15 // 回弹停留在距离顶部20px的位置
                    },
                    pullUpLoad: {
                        threshold: -10
                    }
                });
                scroll.on("pullingDown", () => {    // 上拉加载
                    this.showPullingDown = true;
                    // 刷新fomoInfo 数据
                    getInit(this.walletActive.address).then(() => {
                        for (let i in this.$children) {
                            if (this.$children[i].init) {
                                this.$children[i].init().then(() => {
                                    this.showPullingDown = false;
                                    scroll.finishPullDown();
                                    scroll.refresh();
                                });
                            }
                        }
                    });
                });
                scroll.on("pullingUp", () => {    // 下拉刷新
                    for (let i in this.$children) {
                        if (this.$children[i].getMore) {
                            this.$children[i].getMore().then((res) => {
                                if (res != 1) {
                                    scroll.refresh();
                                }
                                scroll.finishPullUp();
                            });
                        }
                    }
                });
            },
            /*
             * 倒计时
             */
            async getCountDown() {
                this.getCountDownHelp();
                setInterval(() => {
                    this.getCountDownHelp();
                }, 1000);
                setInterval(() => {
                    this.getCountDownHelp();
                }, 5000);
            },

            getCountDownHelp: function () {
                // last开奖倒计时
                let now = parseInt((new Date().getTime() / 1000).toString());
                let timeL = (this.fomoInfo.lastEnd - now) > 0 ? (this.fomoInfo.lastEnd - now) : 0;
                let hL = parseInt((timeL / 3600).toString());
                let mL = parseInt(((timeL - 3600 * hL) / 60).toString());
                let sL = parseInt((timeL - 3600 * hL - 60 * mL).toString());

                hL < 10 ? hL = "0" + hL : "";
                mL < 10 ? mL = "0" + mL : "";
                sL < 10 ? sL = "0" + sL : "";

                this.lCD = {
                    h: hL, m: mL, s: sL, time: timeL
                };

                // week倒计时
                let timeW = (this.fomoInfo.weekEnd - now) > 0 ? (this.fomoInfo.weekEnd - now) : 0;
                let hW = parseInt((timeW / 3600).toString());
                let mW = parseInt(((timeW - 3600 * hW) / 60).toString());
                let sW = parseInt((timeW - 3600 * hW - 60 * mW).toString());

                hW < 10 ? hW = "0" + hW : "";
                mW < 10 ? mW = "0" + mW : "";
                sW < 10 ? sW = "0" + sW : "";
                this.wCD = {
                    h: hW, m: mW, s: sW, time: timeW
                };

                // leaveDT倒计时
                let timeD = (this.fomoInfo.leaveDT - now) > 0 ? (this.fomoInfo.leaveDT - now) : 0;
                let hD = parseInt((timeD / 3600).toString());
                let mD = parseInt(((timeD - 3600 * hD) / 60).toString());
                let sD = parseInt((timeD - 3600 * hD - 60 * mD).toString());

                hD < 10 ? hD = "0" + hD : "";
                mD < 10 ? mD = "0" + mD : "";
                sD < 10 ? sD = "0" + sD : "";
                this.dCD = {
                    h: hD, m: mD, s: sD, time: timeD
                };

                // leaveHT倒计时倒计时
                let timeH = (this.fomoInfo.leaveHT - now) > 0 ? (this.fomoInfo.leaveHT - now) : 0;
                let hH = parseInt((timeH / 3600).toString());
                let mH = parseInt(((timeH - 3600 * hH) / 60).toString());
                let sH = parseInt((timeH - 3600 * hH - 60 * mH).toString());

                hH < 10 ? hH = "0" + hH : "";
                mH < 10 ? mH = "0" + mH : "";
                sH < 10 ? sH = "0" + sH : "";
                this.hCD = {
                    h: hH, m: mH, s: sH, time: timeH
                };
            },

            synBalanceOnce() {
                synBalanceOnce();
            }

        }
    }
</script>

<style scoped>
</style>